﻿@{ 
    Layout = null;
}
<!doctype html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>固定布局，加载顶部、底部</title>
    <style>
    *{
        margin: 0;
        padding:0;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-text-size-adjust:none;
    }
    html{
        font-size:10px;
    }
    body{
        background-color: #f5f5f5;
        font-size: 1.2em;
    }
    .outer{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction:column;
        -webkit-box-orient:vertical;
        box-orient:vertical;
        -webkit-flex-direction:column;
        flex-direction:column;
    }
    .header{
        position: relative;
        height: 44px;
        line-height: 44px;
        border-bottom: 1px solid #ccc;
        background-color: #eee;
    }
    .header h1{
        text-align: center;
        font-size: 2rem;
        font-weight: normal;
    }
    .header .btn{
        position: absolute;
        right: 0;
        top: 0;
        width: 4em;
        height: 100%;
        text-align: center;
        color: #06c;
        font-size: 1.4rem;
        background-color: #ccc;
    }
    .header .btn:active{
        background-color: #aaa;
        color: #fff;
    }
    .inner{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .inner .item{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align:center;
        -webkit-box-align:center;
        box-align:center;
        -webkit-align-items:center;
        align-items:center;
        padding:3.125%;
        border-bottom: 1px solid #ddd;
        color: #333;
        text-decoration: none;
    }
    .inner .item img{
        display: block;
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
    }
    .inner .item h3{
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-height: 40px;
        overflow: hidden;
        line-height: 20px;
        margin: 0 10px;
        font-size: 1.2rem;
    }
    .inner .item .date{
        display: block;
        height: 20px;
        line-height: 20px;
        color: #999;
    }
    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    </style>
    <link href="~/Content/dropload.css" rel="stylesheet" />
    <link href="~/Content/pace-theme-flash.css" rel="stylesheet" />
</head>
<body>
    <div class="outer">
        <div class="header">
            <h1>头部</h1>
            <a href="javascript:;" class="btn lock">锁定</a>
            <div class="footer" style="position:absolute;left:0;top:0;background-color:#fff;">
                <a href=""></a>
                <a href="#"></a>
            </div>
        </div>
        <div class="inner">
            <div class="lists">
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>1文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>2文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>3文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>4文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>5文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>6文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>7文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>8文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>9文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>10文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>11文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
                <a class="item" href="#">
                    <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                    <h3>12文字描述文字描述文字描述文字描述文字描述</h3>
                    <span class="date">2014-14-14</span>
                </a>
            </div>
        </div>
    </div>
    <!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
    <script src="~/Scripts/zepto.min.js"></script>
    <script src="~/Scripts/dropload.min.js"></script>
    <script src="~/Scripts/pace.js"></script>
    <script>
        $(function () {
            // 按钮操作
            $('.header .btn').on('click', function () {
                var $this = $(this);
                if (!!$this.hasClass('lock')) {
                    $this.attr('class', 'btn unlock');
                    $this.text('解锁');
                    // 锁定
                    dropload.lock();
                    $('.dropload-down').hide();
                } else {
                    $this.attr('class', 'btn lock');
                    $this.text('锁定');
                    // 解锁
                    dropload.unlock();
                    $('.dropload-down').show();
                }
            });

            // dropload
            var dropload = $('.inner').dropload({
                domUp: {
                    domClass: 'dropload-up',
                    domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
                    domUpdate: '<div class="dropload-update">↑释放更新</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
                },
                domDown: {
                    domClass: 'dropload-down',
                    domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                    domNoData: '<div class="dropload-noData">暂无数据</div>'
                },
                loadUpFn: function (me) {
                    $.ajax({
                        type: 'GET',
                        url: '/json/update.json',
                        dataType: 'json',
                        success: function (data) {
                            var result = '';
                            for (var i = 0; i < data.lists.length; i++) {
                                result += '<a class="item opacity" href="' + data.lists[i].link + '">'
                                                + '<img src="' + data.lists[i].pic + '" alt="">'
                                                + '<h3>' + data.lists[i].title + '</h3>'
                                                + '<span class="date">' + data.lists[i].date + '</span>'
                                            + '</a>';
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function () {
                                $('.lists').html(result);
                                // 每次数据加载完，必须重置
                                dropload.resetload();
                            }, 1000);
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            dropload.resetload();
                        }
                    });
                },
                loadDownFn: function (me) {
                    $.ajax({
                        type: 'GET',
                        url: '/json/more.json',
                        dataType: 'json',
                        success: function (data) {
                            var result = '';
                            for (var i = 0; i < data.lists.length; i++) {
                                result += '<a class="item opacity" href="' + data.lists[i].link + '">'
                                                + '<img src="' + data.lists[i].pic + '" alt="">'
                                                + '<h3>' + data.lists[i].title + '</h3>'
                                                + '<span class="date">' + data.lists[i].date + '</span>'
                                            + '</a>';
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function () {
                                $('.lists').append(result);
                                // 每次数据加载完，必须重置
                                dropload.resetload();
                            }, 1000);
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            dropload.resetload();
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>